<template>
	<view class="TJGd">
		<h2>推荐歌单</h2>
		<view class="nerrong">
			<view class="smallxiangmu" v-for="item in tjgd" :key="item.id" @click="jump(item.id)">
				<!--  #ifdef  MP-WEIXIN -->
				<image :src="item.picUrl"></image>
				<!--  #endif -->
				<!--  #ifndef  MP-WEIXIN -->
				<img  v-lazy="item.picUrl">
				<!--  #endif -->
				<p>{{item.name}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	import {personalized} from '../../api/tuijian/tuijian.js'
	export default {
		methods:{
			jump(id){
				this.$emit('jump',id)
			}
		},
		data() {
			return {
				tjgd:[]
			}
		},
		created() {
			personalized({limit:6}).then(res => {
				this.tjgd = res.result
			})
		}
	}
</script>

<style lang="scss">
	.TJGd{
		width: 100%;
		// background-color: yellow;
		h2{
			padding-left: 18rpx;
			margin-bottom: 28rpx;
			font-size: 34rpx;
			margin-top: 0px;
			border-left: 4rpx solid #dd001b;
		}
		.nerrong{
			width: 100%;
			// background-color: green;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			.smallxiangmu{
				width: 248rpx;
				height: 360rpx;
				margin-bottom: 32rpx;
				// background: pink;
				/*  #ifdef  MP-WEIXIN */
				image{
					width: 100%;
					height: 248rpx;
				}
				/*  #endif  */
				/*  #ifndef  MP-WEIXIN */
				img{
					width: 100%;
					height: 248rpx;
				}
				/*  #endif  */
				p{
					padding: 12rpx 4rpx 0 12rpx;
					font-size: 26rpx;
					margin: 0;
				}
			}
		}
	}	
</style>
